<template>
  <div class="main-content">
    <div style="display: flex;justify-content: right ;margin-bottom: 20px;margin-right: 20px;margin-top: 20px">
      <el-input clearable   @clear="reset"  v-model="data.name" style="width: 260px" placeholder="输入活动名称查询" :prefix-icon="Search"/>
      <el-button style="margin-left: 5px" type="primary" @click="search">查询</el-button>
    </div>
    <div style="cursor: pointer">
      <el-row :gutter="10">
        <el-col @click="goPage('/front/activityDetail?id='+item.id)" :span="8" v-for="item in data.activityData" :key="item.id">
          <img style="width: 100%;height: 150px" :src="item.img">
          <div style="display: flex;align-items: center">
            <div style="margin-right: 5px">
              <el-tag type="primary" v-if="item.status==='未开始'">{{item.status}}</el-tag>
              <el-tag type="success" v-if="item.status==='进行中'">{{item.status}}</el-tag>
              <el-tag type="danger" v-if="item.status==='已结束'">{{item.status}}</el-tag>
            </div>
            <div style="font-weight: bold;margin: 5px 0">{{item.name}}</div>
          </div>
          <div style="color: #666;font-size: 12px;margin: 5px 0">{{item.descr}}</div>
          <div style="color: #666;font-size: 12px;margin: 5px 0">{{item.start}}~{{item.end}}</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {Search} from "@element-plus/icons-vue";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  activityData:[],
  name:null
})

const loadActivity=()=>{
  request.get('/activity/selectAll',{
    params:{
      name:data.name
    }
  }).then(res=>{
    if(res.code==='200'){
      data.activityData=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadActivity()

const goPage=(path)=>{
  location.href=path
}

const reset=()=>{
  data.name=null;
  loadActivity()
}

const search=()=>{
  loadActivity()
}
</script>


<style scpoed>
.main-content{
  max-width: 900px;
  margin: 10px auto;
}
</style>